<template>
  <div class="count">
    <!-- 
        如果想要获取某个真实DOM,我们需要使用ref属性,
        值是一个名字,未来通过这个名字来获取DOM
     -->
    <h1 ref = 'countEle'>{{ count }}</h1>
    <button @click="add">累加</button>
    <button @click='getEle'>点击获取H1元素</button>
  </div>
</template>

<script>
export default {
  name: "My-Count",
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    add() {
      this.count++;
    },
    getEle(){
        console.log(this);
        console.log(this.$refs.countEle);
        /* 
        在组件实例上有一个$refs属性,是一个对象,
        对象保存的是模板中书写了ref属性的元素
        可以通过this.$refs.xxx获取,得到是一个真实DOM
        */
    }
  },
};
</script>

<style>
.count {
  background-color: yellowgreen;
  height: 200px;
}
</style>